<template>
	<view class="container">
		<cu-panel title='cu-empty'>
			<cu-empty></cu-empty>
		</cu-panel>
		<cu-panel title='cu-meida-show'>
			<cu-media-show :list="mediaShowList" :ableDelete="true" :ableDownload="true" @delete='deleteMediaShow'>
			</cu-media-show>
		</cu-panel>
		<cu-panel title='cu-media-upload'>
			<cu-media-upload ref='upload' colCount="4" :auto-upload="false" :compress-max-size="500"
				@choose='chooseUpload' @start='startUpload' @finish='finishUpload'
				@delete='deleteUpload'></cu-media-upload>
		</cu-panel>
		<cu-panel title="cu-circle">
			<view class="circle-box">
				<view class="circle">
					<cu-circle cid='test' :transparent="true" :strokeWidth="10" :percent='circelPercent'>
						<view class="circle-title">
							{{circelPercent}}%
						</view>
					</cu-circle>
				</view>
			</view>
		</cu-panel>
		<cu-panel title='cu-tab-choose-date'>
			<cu-tab-choose-day ref='tabChooseDay' :defaultAppointCurrentDate='false'
				@chooseItem='chooseItem($event, "tabChooseDay")'
				@dateZoneChange='dateZoneChange($event, "tabChooseDay")'></cu-tab-choose-day>
			<cu-tab-choose-month ref='tabChooseMonth' @chooseItem='chooseItem($event, "tabChooseMonth")'
				@dateZoneChange='dateZoneChange($event, "tabChooseMonth")'></cu-tab-choose-month>
		</cu-panel>
		<cu-panel title='page-list 测试'>
			<button @tap="tapAction('page-list')">点击跳转</button>
		</cu-panel>
	</view>
</template>

<script>
	import {
		ENUM_MEDIA_DOWNLOAD_STATUS,
		ENUM_MEDIA_TYPE
	} from '@/git-submodule/lee-common-js/static/enum';
	import MediaModel from '@/git-submodule/lee-common-js/components/cu-media-item/media-model';
	import {
		UploadParam
	} from '@/git-submodule/lee-common-js/utils/request/requestModels';
	import {
		uploadRequest
	} from "@/git-submodule/lee-common-js/utils/request/index.js"
	export default {
		data() {
			return {
				mediaShowList: [],
				circelPercent: 0,
				runningCirclePercentIntervalId: null,
				uploadFnList: []
			}
		},
		onReady() {
			this.initMediaShowData();
			this.runningPrecent();
			this.initTabChooseDay("2025-09-01")
		},
		methods: {
			initMediaShowData() {
				this.mediaShowList = [
					new MediaModel('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg', ENUM_MEDIA_TYPE
						.IMAGE.value),
					new MediaModel('https://ossweb-img.qq.com/images/lol/web201310/skin/big10002.jpg', ENUM_MEDIA_TYPE
						.IMAGE.value),
					new MediaModel('https://ossweb-img.qq.com/images/lol/web201310/skin/big10003.jpg', ENUM_MEDIA_TYPE
						.IMAGE.value),
					new MediaModel('https://ossweb-img.qq.com/images/lol/web201310/skin/big10004.jpg', ENUM_MEDIA_TYPE
						.IMAGE.value),
					new MediaModel("https://www.w3schools.com/html/movie.mp4", ENUM_MEDIA_TYPE.VIDEO.value)
				]
			},
			deleteMediaShow(events) {
				const {
					deleteMedia,
					deleteIndex,
					deleteResult
				} = events;
				console.log(deleteMedia, deleteIndex);
				if (deleteResult) {
					this.mediaShowList = deleteResult;
				}
			},
			clearRunningCirclePercentIntervalId() {
				if (this.runningCirclePercentIntervalId) {
					clearInterval(this.runningCirclePercentIntervalId);
					this.runningCirclePercentIntervalId = null;
				}
			},
			runningPrecent() {
				this.clearRunningCirclePercentIntervalId();
				if (this.circelPercent >= 100) {
					this.circelPercent = 0;
					this.runningPrecent();
				} else {
					this.circelPercent += 1;
					this.runningCirclePercentIntervalId = setInterval(() => {
						this.runningPrecent();
					}, 100)
				}
			},
			chooseUpload(e) {
				const {
					chooseList,
					chooseResultList
				} = e;
				let uploadFn = (imageUrl, progressUpdateCallback) => {
					return uploadRequest(new UploadParam({
						useBaseUrl: true,
						url: "/travel/file/upload",
						name: 'file',
						header: {
							test: imageUrl
						},
						formData: {},
						timeout: 6000,
						filePath: imageUrl,
						signal: {
							onProgressUpdate: (res) => {
								const {
									progress,
									totalBytesSent,
									totalBytesExpectedToSend
								} = res;
								typeof progressUpdateCallback == 'function' && progressUpdateCallback({
									progress,
									totalBytesSent,
									totalBytesExpectedToSend
								});
							}
						}
					}))
				}
				let failUploadFn = (imageUrl, progressUpdateCallback) => {
					return uploadRequest(new UploadParam({
						url: "/travel/file/upload1",
						name: 'file',
						header: {
							test: imageUrl
						},
						formData: {},
						timeout: 6000,
						filePath: imageUrl,
						signal: {
							onProgressUpdate: (res) => {
								const {
									progress,
									totalBytesSent,
									totalBytesExpectedToSend
								} = res;
								typeof progressUpdateCallback == 'function' && progressUpdateCallback({
									progress,
									totalBytesSent,
									totalBytesExpectedToSend
								});
							}
						}
					}))
				}
				let newUploadFnList = [];
				chooseList.forEach((item, index) => {
					// 测试上传失败
					// if (index % 2 != 0) {
					// 	newUploadFnList.push(failUploadFn);
					// } else {
					// 	newUploadFnList.push(uploadFn)
					// }
					newUploadFnList.push(uploadFn);
				})
				this.uploadFnList = this.uploadFnList.concat(newUploadFnList);
				setTimeout(() => {
					this.$refs.upload.startUpload(0, this.uploadFnList);
				}, 2000)
			},
			startUpload() {
				console.log('startUpload');
			},
			finishUpload(e) {
				console.log('finishUpload', e);
			},
			deleteUpload(e) {
				console.log('deleteUpload', e);
				const {
					deleteItem,
					deleteIndex,
					deleteResult
				} = e;
				this.uploadFnList.splice(deleteIndex, 1);
			},
			initTabChooseDay(initDate) {
				if (!initDate) return;
				let component = this.$refs.tabChooseDay;
				if (component) {
					typeof component.appointDate == 'function' && component.appointDate(initDate);
					typeof component.resetBadgeData({
						[`${initDate}`]: 12
					})
				}
			},
			chooseItem(e, type) {
				console.log(type, e);
			},
			dateZoneChange(e, type) {
				console.log(type, e);
			},
			tapAction(type) {
				switch (type) {
					case "page-list":
						uni.navigateTo({
							url: "/pages/list-test/list-test"
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.circle-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.circle {
				width: 200rpx;
				background: #00000044;
				display: flex;
				flex-direction: column;

				.circle-title {
					font-size: 24rpx;
					color: #ff2525;
					font-weight: 700;
				}
			}
		}
	}
</style>